<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript">
        	var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
			var ppMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productprice');
			var pcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
			var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
			
			var ctYesnoStore = new Ext.data.Store({
                reader: new Ext.data.XmlReader({
                    record: 'item',
                    id: 'code',
                    totalRecords: 'itemTotal'
                }, ['code', 'description']),
                data: ctYesnoXmlLoader.getXml()
            });
			
			var idValue = getPrarmeterValue(window.location, 'id');
			var piIdValue = getPrarmeterValue(window.location, 'piId');
            var startPage = getPrarmeterValue(window.location, 'startPage');
			
			var isYarnAmountEnoughCombo = new Ext.form.ComboBox({
                fieldLabel: ppMessage.get('ui.productprice.doreachmin'),
                id: 'isYarnAmountEnough',
                name: 'isYarnAmountEnough',
                editable: false,
                store: ctYesnoStore,
                valueField: 'code',
                displayField: 'description',
                triggerAction: 'all',
                emptyText: message.get('message.combo.pleaseselect'),
                selectOnFocus: true,
                mode: 'local',
				allowBlank: false,
                blankText: message.get('message.edit.noblank')
            });
			
			var productPriceForm;
			
			 Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var piXMLReader = new Ext.data.XmlReader({
                    record: 'item'
                }, [{
                    name: 'id',
                    mapping: 'id'
                }, {
                    name: 'ctProductFamily',
                    mapping: 'ctProductFamily'
                }, {
                    name: 'ctMachineType',
                    mapping: 'ctMachineType'
                }, {
                    name: 'type',
                    mapping: 'type'
                }, {
                    name: 'orderNumber',
                    mapping: 'orderNumber'
                }, {
                    name: 'yarnNumber',
                    mapping: 'yarnNumber'
                }, {
                    name: 'ctDesignType',
                    mapping: 'ctDesignType'
                }, {
                    name: 'style',
                    mapping: 'style'
                }, {
                    name: 'customerLinkman',
                    mapping: 'customerLinkman'
                }, {
                    name: 'model',
                    mapping: 'model'
                }, {
                    name: 'ctSeasonNumber',
                    mapping: 'ctSeasonNumber'
                }, {
                    name: 'reference',
                    mapping: 'reference'
                }, {
                    name: 'createDate',
                    mapping: 'createDate'
                }, {
                    name: 'ctVersion',
                    mapping: 'ctVersion'
                }, {
                    name: 'patronageNumer',
                    mapping: 'patronageNumer'
                }, {
                    name: 'front',
                    mapping: 'front'
                }, {
                    name: 'back',
                    mapping: 'back'
                }, {
                    name: 'sleeves',
                    mapping: 'sleeves'
                }, {
                    name: 'bottomThrum',
                    mapping: 'bottomThrum'
                }, {
                    name: 'sleevesThrum',
                    mapping: 'sleevesThrum'
                }, {
                    name: 'necklineThrum',
                    mapping: 'necklineThrum'
                }, {
                    name: 'needle',
                    mapping: 'needle'
                }, {
                    name: 'weight',
                    mapping: 'weight'
                }, {
                    name: 'comment',
                    mapping: 'comment'
                }, {
                    name: 'customerID',
                    mapping: 'customerID'
                }, {
                    name: 'photoName',
                    mapping: 'photoName'
                }, {
                    name: 'chartName',
                    mapping: 'chartName'
                }, {
                    name: 'biMeasureSpecificationId',
                    mapping: 'biMeasureSpecificationId'
                }, {
                    name: 'biMeasureSpecificationName',
                    mapping: 'biMeasureSpecificationName'
                }, {
                    name: 'yarnName',
                    mapping: 'yarnName'
                }, {
                    name: 'frontPhotoName',
                    mapping: 'frontPhotoName'
                }, {
                    name: 'backPhotoName',
                    mapping: 'backPhotoName'
                }, {
                    name: 'photoName',
                    mapping: 'photoName'
                }, {
                    name: 'chartName',
                    mapping: 'chartName'
                }, {
                    name: 'ctCollarType',
                    mapping: 'ctCollarType'
                }, {
                    name: 'customerName',
                    mapping: 'customerName'
                }, {
                    name: 'customerDepartment',
                    mapping: 'customerDepartment'
                }]);
                
                var piXmlLoader = new xmlLoader('../../servlet/ProductIdentificationServlet?action=11&id=' + piIdValue);
                
                var piRecord = piXMLReader.readRecords(piXmlLoader.getXml()).records[0];
                
               var itemTplMarkup = ['<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
										 '<tr><td style="background:#eeeeee; width: 15%;">',
										 message.get('message.list.id'), '</td><td>{id}</td>', 
										 '<td style="background:#eeeeee;width: 15%;">', 
										 piMessage.get('ui.productidentification.style'), 
										 '</td><td>{style}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.seasonnumber'), 
										 '</td><td>{ctSeasonNumber}</td>', '<td style="background:#eeeeee;">', 
										 referenceMessage.get('ui.reference.reference'), 
										 '</td><td>{reference}</td></tr>', 
										 
										 
										 '<tr><td style="background:#eeeeee;">', 
										 message.get('message.edit.productfamily'), 
										 '</td><td>{ctProductFamily}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.patronagenumer'), 
										 '</td><td>{patronageNumer}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.chartversion'), 
										 '</td><td>{ctVersion}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.model'), 
										 '</td><td>{model}</td></tr>',
										 '<tr><td style="background:#eeeeee;">', 
										 referenceMessage.get('ui.reference.weight'), 
										 '</td><td>{weight}</td><td style="background:#eeeeee;">', 
										 message.get('message.edit.collar'), 
										 '</td><td>{ctCollarType}</td><td style="background:#eeeeee;">', 
										 fcMessage.get('ui.francecustomer.name'), 
										 '</td><td>{customerName}</td><td style="background:#eeeeee;">', 
										 fcMessage.get('ui.francecustomer.department'), 
										 '</td><td>{customerDepartment}</td></tr>',
										 
										 '<tr><td colspan="8">',
										 //'<img width="120" src="../../_temp/{frontPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
										 //'<img width="120" src="../../_temp/{backPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
										 '<img width="120" src="../../_temp/{chartName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
										 '<img width="120" src="../../_temp/{photoName}"/>',
										 '</td></tr>',
										 '</tbody></table>'];
                var itemTpl = new Ext.Template(itemTplMarkup);
                itemTpl.append('productIdentification', piRecord.data);
				 
				productPriceForm = new Ext.FormPanel({
                    labelAlign: 'left',
                    url: '../../servlet/ProductPriceServlet?action=1',
                    frame: true,
                    title: ppMessage.get('ui.productprice.edittitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 120,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'piId',
                        mapping: 'piId'
                    }, {
                        name: 'unitPrice',
                        mapping: 'unitPrice'
                    },{
                        name: 'isYarnAmountEnough',
                        mapping: 'isYarnAmountEnough'
                    }, {
                        name: 'yarnAmountCoefficient',
                        mapping: 'yarnAmountCoefficient'
                    },{
						name: 'carriage',
						mapping: 'carriage'
					},{
                        name: 'fob',
                        mapping: 'fob'
                    }, {
                        name: 'cfi',
                        mapping: 'cfi'
                    },{
                        name: 'realPrice',
                        mapping: 'realPrice'
                    },{
                        name: 'totalPrice',
                        mapping: 'totalPrice'
                    },{
                        name: 'priceComment',
                        mapping: 'priceComment'
                    }]),
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden',
						value: idValue
                    }, {
                        id: 'piId',
                        name: 'piId',
						value: piRecord.data.id,
                        xtype: 'hidden'
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .33,
                            layout: 'form',
                            items: [isYarnAmountEnoughCombo]
                        },{
                            columnWidth: .33,
                            layout: 'form',
                            items: [{
                                name: 'unitPrice',
                                id: 'unitPrice',
                                fieldLabel: ppMessage.get('ui.productprice.unitprice') + '&nbsp;&nbsp;<b>(&nbsp;€&nbsp;)</b>',
                                xtype: 'numberfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64,
								value:  piRecord.data.unitPrice
                            }]
                        },{
                            columnWidth: .33,
                            layout: 'form',
                            items: [{
                                name: 'yarnAmountCoefficient',
                                id: 'yarnAmountCoefficient',
                                fieldLabel: ppMessage.get('ui.productprice.co'),
                                xtype: 'numberfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64,
								value: 1.0
                            }]
                        }]
                    
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .33,
                            layout: 'form',
                            items: [{
                                name: 'quantity',
                                id: 'quantity',
                                fieldLabel: ppMessage.get('ui.productprice.quantity'),
                                xtype: 'numberfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }]
                        },{
                            columnWidth: .33,
                            layout: 'form',
                            items: [{
                                name: 'realPrice',
                                id: 'realPrice',
                                fieldLabel: ppMessage.get('ui.productprice.realprice') + '&nbsp;&nbsp;<b>(&nbsp;€&nbsp;)</b>',
                                xtype: 'numberfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }]
                        },{
                            columnWidth: .33,
                            layout: 'form',
                            items: [{
                                name: 'totalPrice',
                                id: 'totalPrice',
                                fieldLabel: ppMessage.get('ui.productprice.totalprice') + '&nbsp;&nbsp;<b>(&nbsp;€&nbsp;)</b>',
                                xtype: 'numberfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }]
                        }]
                    
                    },{
						layout: 'column',
                        items: [
							{
	                            columnWidth: .33,
	                            layout: 'form',
	                            items: [{
	                                name: 'carriage',
	                                id: 'carriage',
	                                fieldLabel: ppMessage.get('ui.productprice.carriage') + '&nbsp;&nbsp;<b>(&nbsp;€&nbsp;)</b>',
	                                xtype: 'numberfield',
	                                anchor: '86%',
	                                allowBlank: false,
	                                blankText: message.get('message.edit.noblank'),
	                                maxLength: 64
	                            }]
	                        },{
	                            columnWidth: .33,
	                            layout: 'form',
	                            items: [{
	                                name: 'fob',
	                                id: 'fob',
	                                fieldLabel: 'FOB&nbsp;&nbsp;<b>(&nbsp;€&nbsp;)</b>',
	                                xtype: 'numberfield',
	                                anchor: '86%',
	                                allowBlank: false,
	                                blankText: message.get('message.edit.noblank'),
	                                maxLength: 64
	                            }]
	                        },{
	                            columnWidth: .33,
	                            layout: 'form',
	                            items: [{
	                                name: 'cfi',
	                                id: 'cfi',
	                                fieldLabel: 'CFI&nbsp;&nbsp;<b>(&nbsp;€&nbsp;)</b>',
	                                xtype: 'numberfield',
	                                anchor: '86%',
	                                allowBlank: false,
	                                blankText: message.get('message.edit.noblank'),
	                                maxLength: 64
	                            }]
	                        }
						]
					}],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
							var isYarnAmountEnough = isYarnAmountEnoughCombo.getValue();
                            if (productPriceForm.getForm().isValid()) {
								document.getElementsByName('isYarnAmountEnough')[0].value = isYarnAmountEnoughCombo.getValue();
                                productPriceForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
										isYarnAmountEnoughCombo.setValue(isYarnAmountEnough);
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            productPriceForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'product_price_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'product_price_list.html';
                            }
                        }
                    }]
                });				
				
				productPriceForm.render('productPriceForm');
				
				productPriceForm.getForm().findField('realPrice').on('focus', function(field){
                   if(document.getElementById('unitPrice').value && document.getElementById('yarnAmountCoefficient').value){
				   		document.getElementById('realPrice').value = document.getElementById('unitPrice').value * document.getElementById('yarnAmountCoefficient').value;
				   }else{
				   		productPriceForm.getForm().isValid();
				   }
                });
				
				productPriceForm.getForm().findField('fob').on('focus', function(field){
                   if(document.getElementById('carriage').value && document.getElementById('totalPrice').value){
				   		document.getElementById('fob').value = (document.getElementById('carriage').value * 1) + (document.getElementById('totalPrice').value * 1);
				   }else{
				   		productPriceForm.getForm().isValid();
				   }
                });
				
				productPriceForm.getForm().findField('totalPrice').on('focus', function(field){
                   if(document.getElementById('unitPrice').value && document.getElementById('yarnAmountCoefficient').value && document.getElementById('quantity').value){
				   		document.getElementById('totalPrice').value = document.getElementById('unitPrice').value * document.getElementById('yarnAmountCoefficient').value * document.getElementById('quantity').value;
				   }else{
				   		productPriceForm.getForm().isValid();
				   }
                });
				
				if(idValue != null){
					productPriceForm.getForm().load({
							url:'../../servlet/ProductPriceServlet?action=3&id=' + idValue, 
							waitMsg:Ext.LoadMask.prototype.msg, 
							success: function(form, action){
								
							}
					});
				}
				
				var listStore = new Ext.data.GroupingStore({
	                   url: '../../servlet/OrderServlet?action=5&id=' + piIdValue,
	                   reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
	                    }, ['index', 'id', 'pantoneNumber', 'colorNumber', 'realColor', 
							{
								name: 'amountS',
								type: 'int'
							}, {
								name: 'amountM',
								type: 'int'
							}, {
								name: 'amountL',
								type: 'int'
							}, {
								name: 'amountXl',
								type: 'int'
							}, {
								name:'amountXxl',
								type: 'int'
							}, {
								name:'amountXxxl',
								type: 'int'
							}, {
								name:'total',
								type: 'int'
							}, 
							'colorA', 'pantoneNumberA', 'realColorA', 'percentageA', 
							'colorB', 'pantoneNumberB', 'realColorB', 'percentageB', 
							'colorC', 'pantoneNumberC', 'realColorC', 'percentageC', 
							'colorD', 'pantoneNumberD', 'realColorD', 'percentageD', 
							'colorE', 'pantoneNumberE', 'realColorE', 'percentageE', 
							'colorF', 'pantoneNumberF', 'realColorF', 'percentageF', 
							'colorG', 'pantoneNumberG', 'realColorG', 'percentageG', 
							'colorH', 'pantoneNumberH', 'realColorH', 'percentageH']),
	                    
	                   	groupField: 'index',
	                    sortInfo: {
	                        field: 'index',
	                        direction: "ASC"
	                    }
	                });
					
					var summary = new Ext.grid.GroupSummary();
					var listGrid = new Ext.grid.GridPanel({
	                    title: orderMessage.get('ui.order.listtitle'),
	                    store: listStore,
	                    stripeRows: true,
	                    height: 200,
	                    columns: [{
	                        header: message.get('message.list.id'),
	                        width: 50,
	                        dataIndex: 'index',
	                        sortable: false
	                    },{
	                        id: 'colorNumber',
	                        header: orderMessage.get('ui.order.color'),
	                        dataIndex: 'colorNumber',
							groupable: false,
							summaryRenderer: function(v, params, data){
			                    return '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + message.get('message.list.total');
			                }
	                    },{
	                        header: 'S',
	                        dataIndex: 'amountS',
	                        sortable: false,
							align: 'right',
							groupable: false,
							summaryType:'sum'
	                    },{
	                        header: 'M',
	                        dataIndex: 'amountM',
	                        sortable: false,
							align: 'right',
							groupable: false,
							summaryType:'sum'
	                    },{
	                        header: 'L',
	                        dataIndex: 'amountL',
	                        sortable: false,
							align: 'right',
							groupable: false,
							summaryType:'sum'
	                    },{
	                        header: 'XL',
	                        dataIndex: 'amountXl',
	                        sortable: false,
							align: 'right',
							groupable: false,
							summaryType:'sum'
	                    },{
	                        header: 'XXL',
	                        dataIndex: 'amountXxl',
	                        sortable: false,
							align: 'right',
							groupable: false,
							summaryType:'sum'
	                    },{
	                        header: 'XXXL',
							align: 'right',
	                        dataIndex: 'amountXxxl',
	                        sortable: false,
							groupable: false,
							summaryType:'sum'
	                    },{
	                        header: message.get('message.list.total'),
							id: 'total',
	                        dataIndex: 'total',
							align: 'right',
							groupable: false,
	                        sortable: false,
							summaryType:'sum',
							summaryRenderer: function(v, params, data){
								document.getElementById('quantity').value = v;
								return v;
							}
	                    }],
	                    view: new Ext.grid.GroupingView({
	                        forceFit: true,
							hideGroupedColumn: true,
							enableNoGroups:false,
	                        groupTextTpl: '&nbsp;'
	                    }),
	                    loadMask: true,
	                    plugins: [summary],
	                    renderTo: 'orderList'
	                });
                
					listStore.load();
					
					var detailWin;
	                listGrid.on('rowdblclick', function(grid, rowIndex, e){
	                    if (!detailWin) {
	                        detailWin = new Ext.Window({
	                            title: message.get('message.window.detail'),
	                            layout: 'fit',
	                            width: 500,
	                            height: 300,
	                            closeAction: 'hide',
	                            plain: true,
	                            items: [{
	                                id: 'detailPanel',
	                                region: 'center',
	                                bodyStyle: {
	                                    background: '#ffffff',
	                                    padding: '7px'
	                                },
	                                html: message.get('message.window.empty')
	                            }]
	                        });
	                    }
	                    
	                    detailWin.show(this);
	                    var itemTplMarkup = [
							'<table cellspacing="0" id="the-table"><tbody>',
								'<tr><td style="background:#eeeeee;">',
								orderMessage.get('ui.order.colora'),
								'</td><td>{colorA}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.pantone'),
								'</td><td>{pantoneNumberA}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.precentage') +'(%)',
								'</td><td>{percentageA}</td><td>',
								'<table width="100%" bgcolor="#{[values.realColorA == "" ? "ffffff": values.realColorA]}"><tr height="15"><td></td></tr></table>',
								'</td></tr>',
								
								'<tr><td style="background:#eeeeee;">',
								orderMessage.get('ui.order.colorb'),
								'</td><td>{colorB}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.pantone'),
								'</td><td>{pantoneNumberB}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.precentage') +'(%)',
								'</td><td>{percentageB}</td><td>',
								'<table width="100%" bgcolor="#{[values.realColorB == "" ? "ffffff": values.realColorB]}"><tr height="15"><td></td></tr></table>',
								'</td></tr>',
								
								'<tr><td style="background:#eeeeee;">',
								orderMessage.get('ui.order.colorc'),
								'</td><td>{colorC}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.pantone'),
								'</td><td>{pantoneNumberC}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.precentage') +'(%)',
								'</td><td>{percentageC}</td><td>',
								'<table width="100%" bgcolor="#{[values.realColorC == "" ? "ffffff": values.realColorC]}"><tr height="15"><td></td></tr></table>',
								'</td></tr>',
								
								'<tr><td style="background:#eeeeee;">',
								orderMessage.get('ui.order.colord'),
								'</td><td>{colorD}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.pantone'),
								'</td><td>{pantoneNumberD}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.precentage') +'(%)',
								'</td><td>{percentageD}</td><td>',
								'<table width="100%" bgcolor="#{[values.realColorD == "" ? "ffffff": values.realColorD]}"><tr height="15"><td></td></tr></table>',
								'</td></tr>',
								
								'<tr><td style="background:#eeeeee;">',
								orderMessage.get('ui.order.colore'),
								'</td><td>{colorE}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.pantone'),
								'</td><td>{pantoneNumberE}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.precentage') +'(%)',
								'</td><td>{percentageE}</td><td>',
								'<table width="100%" bgcolor="#{[values.realColorE == "" ? "ffffff": values.realColorE]}"><tr height="15"><td></td></tr></table>',
								'</td></tr>',
								
								'<tr><td style="background:#eeeeee;">',
								orderMessage.get('ui.order.colorf'),
								'</td><td>{colorF}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.pantone'),
								'</td><td>{pantoneNumberF}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.precentage') +'(%)',
								'</td><td>{percentageF}</td><td>',
								'<table width="100%" bgcolor="#{[values.realColorF == "" ? "ffffff": values.realColorF]}"><tr height="15"><td></td></tr></table>',
								'</td></tr>',
								
								'<tr><td style="background:#eeeeee;">',
								orderMessage.get('ui.order.colorg'),
								'</td><td>{colorG}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.pantone'),
								'</td><td>{pantoneNumberG}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.precentage') +'(%)',
								'</td><td>{percentageG}</td><td>',
								'<table width="100%" bgcolor="#{[values.realColorG == "" ? "ffffff": values.realColorG]}"><tr height="15"><td></td></tr></table>',
								'</td></tr>',
								
								'<tr><td style="background:#eeeeee;">',
								orderMessage.get('ui.order.colorh'),
								'</td><td>{colorH}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.pantone'),
								'</td><td>{pantoneNumberH}</td>',
								'<td style="background:#eeeeee;">',
								orderMessage.get('ui.order.precentage') +'(%)',
								'</td><td>{percentageH}</td><td>',
								'<table width="100%" bgcolor="#{[values.realColorH == "" ? "ffffff": values.realColorH]}"><tr height="15"><td></td></tr></table>',
								'</td></tr>',
							'</tbody></table>'
						];
	                    var itemTpl = new Ext.XTemplate(itemTplMarkup);
	                    var detailPanel = Ext.getCmp('detailPanel');
	                    itemTpl.overwrite(detailPanel.body, grid.getStore().getAt(rowIndex).data);
	                });
					
					
					
					var yarnListStore = new Ext.data.Store({
	                   url: '../../servlet/ProductPriceServlet?action=100&id=' + piIdValue,
	                   reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
	                    }, ['index', 'reference', 'fil', 'ctMaterialType' , 'customerColor', 'factoryColor', 'pantoneNumber', 'realColor', 
							'orderWeight', 'procurementWeight', 'minWeight', 'doReachMin']),
	                    
	                   remoteSort: true
	                });
					
					var listGrid = new Ext.grid.GridPanel({
	                    title: orderMessage.get('ui.order.listtitle'),
	                    store: yarnListStore,
	                    stripeRows: true,
	                    height: 200,
	                    columns: [{
	                        header: message.get('message.list.id'),
	                        width: 50,
	                        dataIndex: 'index',
	                        sortable: false
	                    },{
	                        header: piMessage.get('ui.productidentification.fil'),
	                        dataIndex: 'fil',
	                        sortable: false
	                    },{
	                        header: message.get('message.edit.reference'),
	                        dataIndex: 'reference',
	                        sortable: false
	                    },{
	                        header: message.get('message.edit.materialtype'),
	                        dataIndex: 'ctMaterialType',
	                        sortable: false
	                    },{
	                        header: colorMessage.get('ui.pantonecolor.customercolor'),
	                        dataIndex: 'customerColor',
	                        sortable: false
	                    },{
	                        header: colorMessage.get('ui.pantonecolor.factorycolor'),
	                        dataIndex: 'factoryColor',
	                        sortable: false
	                    },{
	                        header: orderMessage.get('ui.order.pantone'),
	                        dataIndex: 'pantoneNumber',
	                        sortable: false
	                    },{
	                        header: pcMessage.get('ui.pantonecolor.realcolor'),
	                        dataIndex: 'realColor',
	                        sortable: false,
							renderer: renderSample
	                    },{
	                        header: ppMessage.get('ui.productprice.orderweight'),
	                        dataIndex: 'orderWeight',
	                        sortable: false,
							align: 'right',
							renderer: renderWeight
	                    },{
	                        header: ppMessage.get('ui.productprice.proweight'),
	                        dataIndex: 'procurementWeight',
	                        sortable: false,
							align: 'right',
							renderer: renderWeight
	                    },{
	                        header: ppMessage.get('ui.productprice.minweight'),
	                        dataIndex: 'minWeight',
	                        sortable: false,
							align: 'right',
							renderer: renderWeight
	                    },{
	                        header: ppMessage.get('ui.productprice.doreachmin'),
	                        dataIndex: 'doReachMin',
	                        sortable: false,
							renderer: renderYesno
	                    }],
	                    viewConfig: {
                        forceFit: true
                    },
	                    loadMask: true,
	                    renderTo: 'yarnList'
	                });
					
					function renderSample(value, p, record){
                    	return String.format('<table width="20" style="background-color: #{0};"><tr><td>&nbsp;</td></tr></table>', record.data.realColor);
                	}
					
					function renderWeight(value, p, record){
						return String.format('{0}&nbsp;&nbsp;Kg', value);
					}
					
					function renderYesno(value, p, record){
						if(value == '0')
							return String.format('<img ext:qtip="{0}" src="../../images/icons/cross.png" />', message.get('message.list.no'));
						else
							return String.format('<img ext:qtip="{0}" src="../../images/icons/tick.png"/>', message.get('message.list.yes'));
	                }
                
					yarnListStore.load();
				
			});
        </script>
</head>
<body>
	<div id="productIdentification">
    </div>
	<div id="productPriceForm"></div><div id="orderList"></div><div id="yarnList"></div>
</body>
</html>